<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>专题制作插件</title>
<link rel="stylesheet" href="./js/jquery-ui.min.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery-ui.min.js"></script>
<script src="./js/jquery.colorpicker.js"></script>
<script src="./js/jquery.mousewheel.js"></script>

</head>

<script>
	var productNameSubmit = "";//确认的产品型号
	var optionValSubmit = -1;//确认的option选项值，-1没选，0为no，1为yes
	var middleWidthSubmit = 0;//确认的中间td宽度
	var sideWidthSubmit = 0;//确认的两边td宽度
	var tableWidthSubmit = 0;//确认的table宽度
	var alreadyCommit = 0;//确认选项
	
	var addNumber = 0;//table数量
	
	//初始化提交值
	var init = function(){
		console.log("initial");
		productNameSubmit = "";
		optionValSubmit = -1;
		middleWidthSubmit = 0;
		sideWidthSubmit = 0;
		tableWidthSubmit = 0;
		alreadyCommit = 0;
	}
	
	//提交参数
	var submitValue = function(productName,optionVal,middleWidth,sideWidth,tableWidth){
		if(optionVal == 1)
		{
			console.log("MF submit");
		}
		else
		{
			console.log("TL submit");
		}
		$(document).attr("title",productName);
		productNameSubmit = productName;
		optionValSubmit = optionVal;
		middleWidthSubmit = middleWidth;
		sideWidthSubmit = sideWidth;
		tableWidthSubmit = tableWidth;
		alreadyCommit = 1;
	}
	
	//MF版面处理
	var modifyMFTable = function(){
		console.log("modifyMFTable");
		if(addNumber > 0)
		{
			//div处理
			$("div").eq(2).attr("id",productNameSubmit + "-main");
			$("#" + productNameSubmit + "-main").css({
				"width": "100%",
				"min-width":middleWidthSubmit+"px"
			});
			//table处理
			$("#" + productNameSubmit + "-main").find("table").css({
				"width":"100%",
				"min-width":middleWidthSubmit+"px"
			});
			//td处理
			var td1 = $("#" + productNameSubmit + "-main").find("table").find("tr").find("td");
			td1.eq(0).attr("width","auto");
			td1.eq(2).attr("width","auto");
		}
	}
	
	//TL版面处理
	var modifyTLTable = function(){
		console.log("modifyTLTable");
		if(addNumber > 0)
		{
			//div处理
			var w3 = middleWidthSubmit + 2 * sideWidthSubmit;
			$("div").eq(2).attr("id",productNameSubmit + "-main");
			$("#" + productNameSubmit + "-main").css({
				"width": w3+"px",
				"min-width":""
			});
			//table处理
			$("#" + productNameSubmit + "-main").find("table").css({
				"width":w3+"px",
				"min-width":""
			});
			//td处理
			var td2 = $("#" + productNameSubmit + "-main").find("table").find("tr").find("td");
			td2.eq(0).attr("width",sideWidthSubmit+"px");
			td2.eq(2).attr("width",sideWidthSubmit+"px");
		}
	}
	
	//校验数据
	var validateData = function(productName,optionVal,middleWidth,sideWidth,tableWidth){
		console.log("validate");
		if(productName == "")
		{
			alert("产品型号(英文)");
			return false;
		}
		if(optionVal != "yes" && optionVal != "no")
		{
			alert("选择td是否使用auto");
			return false;
		}
		if(isNaN(middleWidth) || middleWidth < 500)
		{
			alert("中间td的宽度(px)");
			return false;
		}
		if(optionVal == "yes")
		{
			if(isNaN(tableWidth) || tableWidth < 500)
			{
				alert("table宽度(px)");
				return false;
			}
		}
		if(optionVal == "no")
		{
			if(isNaN(sideWidth) || sideWidth < 50)
			{
				alert("不使用auto时两边td宽度(px)");
				return false;
			}
		}
		return true;
	}
	
	//添加div
	var addDiv = function(){
		$("#append-new").before(
			'<div id="' + productNameSubmit + '-main">' + '</div>'
		);
		if(optionValSubmit == 0)
		{
			var w = middleWidthSubmit + 2 * sideWidthSubmit;
			$("#" + productNameSubmit + "-main").css({
				"width": w+"px",
				"font":"16px/26px 'Microsoft YaHei'"
			});
		}
		else
		{
			$("#" + productNameSubmit + "-main").css({
				"width": "100%",
				"font":"16px/26px 'Microsoft YaHei'",
				"min-width":middleWidthSubmit+"px"
			});
		}
	}
	
	//添加table，图片数1-9
	var addTable19 = function(){
		$("#" + productNameSubmit + "-main").append(
			'<table cellpadding="0" cellspacing="0" background="images/'
			+ productNameSubmit + '_0' + addNumber + '.jpg">'
			+ '</table>'
		);
	}
	
	//添加table，图片数10+
	var addTable10 = function(){
		$("#" + productNameSubmit + "-main").append(
			'<table cellpadding="0" cellspacing="0" background="images/'
			+ productNameSubmit + '_' + addNumber + '.jpg">'
			+ '</table>'
		);
	}
	
	//设置TLtable属性
	var setTLTableCSS = function(){
		var w2 = middleWidthSubmit + 2 * sideWidthSubmit;
		$("#" + productNameSubmit + "-main").find("table").eq(addNumber-1).css({
			"width":w2+"px",
			"height":"500px",
			"background-position":"center 0"
		});
	}
	
	//设置MFtable属性
	var setMFTableCSS = function(){
		$("#" + productNameSubmit + "-main").find("table").eq(addNumber-1).css({
			"width":"100%",
			"min-width":middleWidthSubmit+"px",
			"height":"500px",
			"background-position":"center 0"
		});
	}
	
	//插入table
	var addTable = function(){
		//插入table
		if(addNumber < 10)
		{
			addTable19();
		}
		else
		{
			addTable10();
		}
	}
	
	//插入TLtrtd
	var addTLtrtd = function(){
		//插入tr td
		$("#" + productNameSubmit + "-main").find("table").eq(addNumber-1).append(
			'<tr>' 
			+ '<td width="' + sideWidthSubmit + 'px">&nbsp;</td>'
			+ '<td width="' + middleWidthSubmit + 'px" align="center" valign="top">'
			+ '</td>'
			+ '<td width="' + sideWidthSubmit + 'px">&nbsp;</td>'
			+ '</tr>'
		);
	}
	
	//插入MFtrtd
	var addMFtrtd = function(){
		//插入tr td
		$("#" + productNameSubmit + "-main").find("table").eq(addNumber-1).append(
			'<tr>' 
			+ '<td width="auto">&nbsp;</td>'
			+ '<td width="' + middleWidthSubmit + 'px" align="center" valign="top">'
			+ '</td>'
			+ '<td width="auto">&nbsp;</td>'
			+ '</tr>'
		);
	}
	
	//加入一块内容
	var addContent = function(){
		addNumber++;
		console.log('addNumber:'+addNumber);
		//第一次插入外层div
		if(addNumber == 1)
		{
			addDiv();
		}
		
		//插入table内容
		if(optionValSubmit == 0)
		{
			//产品为TL
			addTable();
			setTLTableCSS();
			addTLtrtd();
		}
		else
		{
			//产品为MF
			addTable();
			setMFTableCSS();
			addMFtrtd();
		}
	}
	
	//table后添加控制界面
	var addControllerFace = function(){
		$("#" + productNameSubmit + "-main").find("table").eq(addNumber-1).after(
			'<div class="helper" style="position:relative;top:-500px;width:300px;">'
				+ '<button class="show-hidden-ctrl" onclick="$(this).parent().find(\'div\').slideToggle(\'slow\')">显示/隐藏控件</button>'
				+ '<div class="table-helper">'
					+ '<button class="hints-dark" style="margin-right: 9px;" onclick="$(this).parent().css(\'color\',\'#000000\')">提示文字变深色</button>'
					+ '<button class="hints-light" onclick="$(this).parent().css(\'color\',\'#ffffff\')">提示文字变浅色</button>'
					+ '<br/>'
					+ '设置table高度：'
					+ '<input type="text" name="height" class="table-height" placeholder="table高度"/>'
					+ '<br/>'
					+ '设置中间td文字：居中/居左'
					+ '<select class="set-td-align">'
						+ '<option value="center">center</option>'
						+ '<option value="left">left</option>'
            		+ '</select>'
					+ '<br/>'
					+ '<button class="addh3" style="margin-right: 66px;">addh3</button>'
					+ '<button class="addp">addp</button>'
					+ '<br/>'
					+ '<button class="remove-h3-p" style="margin-right: 27px;">remove-h3-p</button>'
            		+ '<button class="remove-table">remove-table</button>'
				+ '</div>'
			+ '</div>'
		);
	}
	
	//循环产生table的input监听器，更改table高度
	var changeTableHeight = function(){
		$(".helper .table-height").each(function(index, element) {
			$(this).bind('input propertychange',function(){
				console.log("index:"+index);
				var value = parseInt($(this).val());
				console.log("value:"+value);
				if(isNaN(value))
				{
					value = 500;
				}
				else if(value < 10 || value > 2000)
				{
					value = 500;
				}
				$("table").eq(index).css('height',value+'px');
				$(".helper").eq(index).css('top','-'+value+'px');
			});
		});
	}
	
	//设置td的align
	var setTdAlign = function(){
		$(".helper .set-td-align").each(function(index, element){
			$(this).on("change",function(){
				console.log("index:"+index);
				var value = $(this).children('option:selected').val();
				console.log("value:"+value);
				$("table").eq(index).find("td").eq(1).attr('align',value);
			});
		});
	}
	
	//插入<h3>
	var addH3 = function(){
		$(".helper .addh3").each(function(index, element){
			$(this).on("click",function(){
				console.log("index:"+index);
				console.log("add <h3>");
				$("table").eq(index).find("td").eq(1).append(
					'<h3 style="font-size:30px;line-height: 40px;font-weight:normal;color:#ff0000;" class="h3draggable">'
						+ 'h3h3h3h3h3'
					+ '</h3>'
				);
				$(".h3-helper").children().unbind().remove();
				$(".h3-helper").remove();
				$(".h3cp").remove();
				h3Helper();
			});
		});
	}
	
	//插入<p>
	var addP = function(){
		$(".helper .addp").each(function(index, element){
			$(this).on("click",function(){
				console.log("index:"+index);
				console.log("add <p>");
				$("table").eq(index).find("td").eq(1).append(
					'<p style="font-size:16px;line-height: 26px;color:#0000ff;" class="pdraggable">'
						+ 'pppppppppppp'
					+ '</p>'
				);
				$(".p-helper").children().unbind().remove();
				$(".p-helper").remove();
				$(".pcp").remove();
				pHelper();
			});
		});
	}
	
	//去掉h3控件
	var removeH3Helper = function(h3tableNum,h3Num)
	{
		if($(".h3-helper" + h3tableNum + "-" + h3Num) != null)
		{
			console.log("removeH3Helper");
			$(".h3-helper" + h3tableNum + "-" + h3Num).children().unbind().remove();
			$(".h3-helper" + h3tableNum + "-" + h3Num).remove();
		}
		$(".h3cp").remove();
	}
	
	//去掉p控件
	var removePHelper = function(ptableNum,pNum)
	{
		if($(".p-helper" + ptableNum + "-" + pNum) != null)
		{
			console.log("removePHelper");
			$(".p-helper" + ptableNum + "-" + pNum).children().unbind().remove();
			$(".p-helper" + ptableNum + "-" + pNum).remove();
		}
		$(".pcp").remove();
	}
	
	//增加h3控制界面
	var addH3ControllerFace = function(h3tableNumber,h3Number){
		console.log("addH3ControllerFace");
		$(".helper").eq(h3tableNumber).find("div").eq(0).append(
			'<div class="h3-helper' + h3tableNumber + '-' + h3Number + ' h3-helper' + '" style="width:300px;">'
				+ '<p style="margin:0;">当前h3-文字大小/行高:</p>'
				//+ '<input type="text" name="h3-font-size" class="h3-font-size" placeholder="h3-font-size"/>'
				+ '<input type="text" class="h3-font-size-spinner" name="h3-font-size-spinner" placeholder="h3-font-size-spinner">'
				//+ '<input type="text" name="h3-line-height" class="h3-line-height" placeholder="h3-line-height"/>'
				+ '<input type="text" class="h3-line-height-spinner" name="h3-line-height-spinner" placeholder="h3-line-height-spinner">'
				+ '<br/>'
				+ '<input type="text" name="h3-color" class="h3-color" style="width:100px;margin-right:15px;" placeholder="点击选择颜色"/>'
				+ '<input type="text" name="h3-color-more" class="h3-color-more" style="width:100px;" placeholder="输入更多颜色"/>'
				+ '<br/>'
				+ '<select class="h3-align" style="margin-right:57px;">'
					+ '<option value="center">center</option>'
					+ '<option value="left">left</option>'
				+ '</select>'
				+ '<button class="h3-reset-position">reset-position</button>'
				+ '<br/>'
				+ '<textarea class="h3-textarea" style="height:150px;width:250px;" placeholder="h3输入内容">h3输入内容</textarea>'
			+ '</div>'
		);
	}
	
	//增加p控制界面
	var addPControllerFace = function(ptableNumber,pNumber){
		console.log("addPControllerFace");
		$(".helper").eq(ptableNumber).find("div").eq(0).append(
			'<div class="p-helper' + ptableNumber + '-' + pNumber + ' p-helper' + '" style="width:300px;">'
				+ '<p style="margin:0;">当前p-文字大小/行高:</p>'
				//+ '<input type="text" name="p-font-size" class="p-font-size" placeholder="p-font-size"/>'
				+ '<input type="text" class="p-font-size-spinner" name="p-font-size-spinner" placeholder="p-font-size-spinner">'
				//+ '<input type="text" name="p-line-height" class="p-line-height" placeholder="p-line-height"/>'
				+ '<input type="text" class="p-line-height-spinner" name="p-line-height-spinner" placeholder="p-line-height-spinner">'
				+ '<br/>'
				+ '<input type="text" name="p-color" class="p-color" style="width:100px;margin-right:15px;" placeholder="点击选择颜色"/>'
				+ '<input type="text" name="p-color-more" class="p-color-more" style="width:100px;" placeholder="输入更多颜色"/>'
				+ '<br/>'
				+ '<select class="p-align" style="margin-right:57px;">'
					+ '<option value="center">center</option>'
					+ '<option value="left">left</option>'
				+ '</select>'
				+ '<button class="p-reset-position">reset-position</button>'
				+ '<br/>'
				+ '<textarea class="p-textarea" style="height:150px;width:250px;" placeholder="p输入内容">p输入内容</textarea>'
			+ '</div>'
		);
	}
	
	//设置h3控制界面
	var setH3ControllerFace = function(h3tableNumber,h3Number){
		//$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-font-size").val(parseInt($("table").eq(h3tableNumber).find("h3").eq(h3Number).css("font-size")));
		$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-font-size-spinner").spinner();
		$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-font-size-spinner").spinner("value",parseInt($("table").eq(h3tableNumber).find("h3").eq(h3Number).css("font-size")));
		//$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-line-height").val(parseInt($("table").eq(h3tableNumber).find("h3").eq(h3Number).css("line-height")));
		$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-line-height-spinner").spinner();
		$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-line-height-spinner").spinner("value",parseInt($("table").eq(h3tableNumber).find("h3").eq(h3Number).css("font-size")));
		//$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-color").val($("table").eq(h3tableNumber).find("h3").eq(h3Number).css("color"));
		//$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-color-more").val($("table").eq(h3tableNumber).find("h3").eq(h3Number).css("color"));
		$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-textarea").html($("table").eq(h3tableNumber).find("h3").eq(h3Number).html());
		$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-font-size-spinner").css("width","50px");
		$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-line-height-spinner").css("width","50px");
		$(".h3-helper" + h3tableNumber + "-" + h3Number).find("span").eq(0).css("margin-right","39px");
		//$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-color").css({"width":"100px","margin-right":"15px"});
		//$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-color-more").css("width","100px");
		//$(".h3-helper" + h3tableNumber + "-" + h3Number).find("h3-align").css("margin-right","57px");
	}
	
	//设置p控制界面
	var setPControllerFace = function(ptableNumber,pNumber){
		//$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-font-size").val(parseInt($("table").eq(ptableNumber).find("p").eq(pNumber).css("font-size")));
		$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-font-size-spinner").spinner();
		$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-font-size-spinner").spinner("value",parseInt($("table").eq(ptableNumber).find("p").eq(pNumber).css("font-size")));
		//$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-line-height").val(parseInt($("table").eq(ptableNumber).find("p").eq(pNumber).css("line-height")));
		$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-line-height-spinner").spinner();
		$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-line-height-spinner").spinner("value",parseInt($("table").eq(ptableNumber).find("p").eq(pNumber).css("line-height")));
		//$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-color").val($("table").eq(ptableNumber).find("p").eq(pNumber).css("color"));
		//$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-color-more").val($("table").eq(ptableNumber).find("p").eq(pNumber).css("color"));
		$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-textarea").html($("table").eq(ptableNumber).find("p").eq(pNumber).html());
		$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-font-size-spinner").css("width","50px");
		$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-line-height-spinner").css("width","50px");
		$(".p-helper" + ptableNumber + "-" + pNumber).find("span").eq(0).css("margin-right","39px");
		//$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-color").css({"width":"100px","margin-right":"15px"});
		//$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-color-more").css("width","100px");
		//$(".p-helper" + ptableNumber + "-" + pNumber).find("p-align").css("margin-right","57px");
	}
	
	//改变h3字体大小
	var h3FontSize = function(h3tableNumber,h3Number){
		$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-font-size").bind('input propertychange',function(){
			var value = parseInt($(this).val());
			console.log("font-size:" + value + " h3tableNumber:" + h3tableNumber + " h3Number:" + h3Number);
			if(isNaN(value))
			{
				value = 10;
			}
			else if(value < 10 || value > 80)
			{
				value = 10;
			}
			$("table").eq(h3tableNumber).find("h3").eq(h3Number).css("font-size",value + "px");
		});
	}
	
	//spinner改变h3字体大小
	var h3FontSizeSpinner = function(h3tableNumber,h3Number){
		$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-font-size-spinner").spinner({
			min:10,
			max:80,
			spin: function( event, ui ) {
				console.log("spinner-font-size:" + ui.value + " h3tableNumber:" + h3tableNumber + " h3Number:" + h3Number);
				$("table").eq(h3tableNumber).find("h3").eq(h3Number).css("font-size",ui.value + "px");
			}
		});
	}
	
	//spinner改变p字体大小
	var pFontSizeSpinner = function(ptableNumber,pNumber){
		$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-font-size-spinner").spinner({
			min:10,
			max:80,
			spin: function( event, ui ) {
				console.log("spinner-font-size:" + ui.value + " ptableNumber:" + ptableNumber + " pNumber:" + pNumber);
				$("table").eq(ptableNumber).find("p").eq(pNumber).css("font-size",ui.value + "px");
			}
		});
	}
	
	//改变p字体大小
	var pFontSize = function(ptableNumber,pNumber){
		$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-font-size").bind('input propertychange',function(){
			var value = parseInt($(this).val());
			console.log("font-size:" + value + " ptableNumber:" + ptableNumber + " pNumber:" + pNumber);
			if(isNaN(value))
			{
				value = 10;
			}
			else if(value < 10 || value > 80)
			{
				value = 10;
			}
			$("table").eq(ptableNumber).find("p").eq(pNumber).css("font-size",value + "px");
		});
	}
	
	//改变h3行高
	var h3LineHeight = function(h3tableNumber,h3Number){
		$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-line-height").bind('input propertychange',function(){
			var value = parseInt($(this).val());
			console.log("line-height:" + value + " h3tableNumber:" + h3tableNumber + " h3Number:" + h3Number);
			if(isNaN(value))
			{
				value = 20;
			}
			else if(value < 20 || value > 150)
			{
				value = 20;
			}
			$("table").eq(h3tableNumber).find("h3").eq(h3Number).css("line-height",value + "px");
		});
	}
	
	//spinner改变h3行高
	var h3LineHeightSpinner = function(h3tableNumber,h3Number){
		$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-line-height-spinner").spinner({
			min:10,
			max:120,
			spin: function( event, ui ) {
				console.log("spinner-line-height:" + ui.value + " h3tableNumber:" + h3tableNumber + " h3Number:" + h3Number);
				$("table").eq(h3tableNumber).find("h3").eq(h3Number).css("line-height",ui.value + "px");
			}
		});
	}
	
	//spinner改变p行高
	var pLineHeightSpinner = function(ptableNumber,pNumber){
		$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-line-height-spinner").spinner({
			min:10,
			max:120,
			spin: function( event, ui ) {
				console.log("spinner-line-height:" + ui.value + " ptableNumber:" + ptableNumber + " pNumber:" + pNumber);
				$("table").eq(ptableNumber).find("p").eq(pNumber).css("line-height",ui.value + "px");
			}
		});
	}
	
	//改变p行高
	var pLineHeight = function(ptableNumber,pNumber){
		$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-line-height").bind('input propertychange',function(){
			var value = parseInt($(this).val());
			console.log("line-height:" + value + " ptableNumber:" + ptableNumber + " pNumber:" + pNumber);
			if(isNaN(value))
			{
				value = 20;
			}
			else if(value < 20 || value > 150)
			{
				value = 20;
			}
			$("table").eq(ptableNumber).find("p").eq(pNumber).css("line-height",value + "px");
		});
	}
	
	//改变h3颜色
	var h3Color = function(h3tableNumber,h3Number){
		$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-color").colorpicker({
			fillcolor:true,
			event:'click',
			target:$("table").eq(h3tableNumber).find("h3").eq(h3Number),
			success:function(o,color){
				$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-color").val(color)
			}
		});
		$(".colorpanel").each(function(index, element) {
            if($(".colorpanel").eq(index).attr("class").indexOf("pcp") == -1)
			{
				$(".colorpanel").eq(index).addClass("h3cp");
			}
        });
		
	}
	
	//输入更多h3颜色
	var h3ColorMore = function(h3tableNumber,h3Number){
		$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-color-more").bind('input propertychange',function(){
			var value = $(this).val();
			var reg = /^#[0-9a-f]{6}$/;
			console.log("color:" + value + " h3tableNumber:" + h3tableNumber + " h3Number:" + h3Number);
			if(reg.test(value))
			{
				$("table").eq(h3tableNumber).find("h3").eq(h3Number).css("color",value);
			}
			else
			{
				$("table").eq(h3tableNumber).find("h3").eq(h3Number).css("color","#ff0000");
			}
		});
	}
	
	//改变p颜色
	var pColor = function(ptableNumber,pNumber){
		$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-color").colorpicker({
			fillcolor:true,
			event:'click',
			target:$("table").eq(ptableNumber).find("p").eq(pNumber),
			success:function(o,color){
				$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-color").val(color)
			}
		});
		$(".colorpanel").each(function(index, element) {
            if($(".colorpanel").eq(index).attr("class").indexOf("h3cp") == -1)
			{
				$(".colorpanel").eq(index).addClass("pcp");
			}
        });
	}
	
	//输入更多p颜色
	var pColorMore = function(ptableNumber,pNumber){
		$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-color-more").bind('click',function(){
			var value = $(this).val();
			var reg = /^#[0-9a-f]{6}$/;
			console.log("color:" + value + " ptableNumber:" + ptableNumber + " pNumber:" + pNumber);
			if(reg.test(value))
			{
				$("table").eq(ptableNumber).find("p").eq(pNumber).css("color",value);
			}
			else
			{
				$("table").eq(ptableNumber).find("p").eq(pNumber).css("color","0000ff");
			}
		});
	}
	
	//改变h3 align
	var h3Align = function(h3tableNumber,h3Number){
		$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-align").on("change",function(){
			var value = $(this).children("option:selected").val();
			console.log("align:" + value + " h3tableNumber:" + h3tableNumber + " h3Number:" + h3Number);
			$("table").eq(h3tableNumber).find("h3").eq(h3Number).attr("align",value);
		});
	}
	
	//改变p align
	var pAlign = function(ptableNumber,pNumber){
		$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-align").on("change",function(){
			var value = $(this).children("option:selected").val();
			console.log("align:" + value + " ptableNumber:" + ptableNumber + " pNumber:" + pNumber);
			$("table").eq(ptableNumber).find("p").eq(pNumber).attr("align",value);
		});
	}
	
	//重置h3位置
	var h3ResetPosition = function(h3tableNumber,h3Number){
		$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-reset-position").on("click",function(){
			console.log("reset h3 position," + " h3tableNumber:" + h3tableNumber + " h3Number:" + h3Number)
			$("table").eq(h3tableNumber).find("h3").eq(h3Number).css({
				"left":"0px",
				"top":"0px"
			});
		});
	}
	
	//重置p位置
	var pResetPosition = function(ptableNumber,pNumber){
		$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-reset-position").on("click",function(){
			console.log("reset p position," + " ptableNumber:" + ptableNumber + " pNumber:" + pNumber)
			$("table").eq(ptableNumber).find("p").eq(pNumber).css({
				"left":"0px",
				"top":"0px"
			});
		});
	}
	
	//输入h3内容
	var h3Textarea = function(h3tableNumber,h3Number){
		$(".h3-helper" + h3tableNumber + "-" + h3Number).find(".h3-textarea").bind('input propertychange',function(){
			var value = $(this).val().replace(/\n/g,"<br/>").replace(/\s/g,"&nbsp;");
			console.log("textarea:" + value + " h3tableNumber:" + h3tableNumber + " h3Number:" + h3Number);
			$("table").eq(h3tableNumber).find("h3").eq(h3Number).html(value);
			if(value.length == 0)
			{
				$("table").eq(h3tableNumber).find("h3").eq(h3Number).html("h3待输入内容");
			}
		});
	}
	
	//输入p内容
	var pTextarea = function(ptableNumber,pNumber){
		$(".p-helper" + ptableNumber + "-" + pNumber).find(".p-textarea").bind('input propertychange',function(){
			var value = $(this).val().replace(/\n/g,"<br/>").replace(/\s/g,"&nbsp;");
			console.log("textarea:" + value + " ptableNumber:" + ptableNumber + " pNumber:" + pNumber);
			$("table").eq(ptableNumber).find("p").eq(pNumber).html(value);
			if(value.length == 0)
			{
				$("table").eq(ptableNumber).find("p").eq(pNumber).html("p待输入内容");
			}
		});
	}
	
	//<h3>帮助模块
	var h3Helper = function(){
		var h3tableNum = -1;
		var h3Num = -1;
		var h3LeftOldNum = 0;
		var h3TopOldNum = 0;
		$(".h3draggable").draggable({
			start: function() {
				console.log("start");
				console.log($(this));
				var h3table = $(this).parent().parent().parent().parent();
				var h3tableNumber = $("table").index(h3table);
				var h3Number = $(this).parent().find("h3").index($(this));
				var h3LeftOldNumber = parseInt($(this).css("left"));
				var h3TopOldNumber = parseInt($(this).css("top"));
				console.log("old h3tableNumber:" + h3tableNum + " old h3Number:" + h3Num);
				console.log("click h3" + " h3tableNumber:" + h3tableNumber + " h3Number:" + h3Number);
				console.log("h3LeftOldNumber:" + h3LeftOldNumber + " h3TopOldNumber:" + h3TopOldNumber);
				if(h3tableNumber != h3tableNum || h3Number != h3Num)
				{
					removeH3Helper(h3tableNum,h3Num);
					
					h3tableNum = h3tableNumber;
					h3Num = h3Number;
					
					addH3ControllerFace(h3tableNumber,h3Number);
					setH3ControllerFace(h3tableNumber,h3Number);
					//h3FontSize(h3tableNumber,h3Number);
					h3FontSizeSpinner(h3tableNumber,h3Number);
					//h3LineHeight(h3tableNumber,h3Number);
					h3LineHeightSpinner(h3tableNumber,h3Number);
					h3Color(h3tableNumber,h3Number);
					h3ColorMore(h3tableNumber,h3Number);
					h3Align(h3tableNumber,h3Number);
					h3ResetPosition(h3tableNumber,h3Number);
					h3Textarea(h3tableNumber,h3Number);
				}
				else
				{
					h3LeftOldNum = h3LeftOldNumber;
					h3TopOldNum = h3TopOldNumber;
				}
			},
			drag: function() {
				console.log("drag");
			},
			stop: function() {
				console.log("stop");
				var h3LeftNewNumber = parseInt($(this).css("left"));
				var h3TopNewNumber = parseInt($(this).css("top"));
				console.log("h3LeftNewNumber:" + h3LeftNewNumber + " h3TopNewNumber:" + h3TopNewNumber);
				var h3Left = Math.abs(h3LeftNewNumber - h3LeftOldNum);
				var h3Top = Math.abs(h3TopNewNumber - h3TopOldNum);
				if(h3Left + h3Top <= 10)
				{
					$(this).css({
						"left":h3LeftOldNum+"px",
						"top":h3TopOldNum+"px"
					});
				}
			}
		});
	}
	
	//<p>帮助模块
	var pHelper = function(){
		var ptableNum = -1;
		var pNum = -1;
		var pLeftOldNum = 0;
		var pTopOldNum = 0;
		$(".pdraggable").draggable({
			start: function() {
				console.log("start");
				console.log($(this));
				var ptable = $(this).parent().parent().parent().parent();
				var ptableNumber = $("table").index(ptable);
				var pNumber = $(this).parent().find("p").index($(this));
				var pLeftOldNumber = parseInt($(this).css("left"));
				var pTopOldNumber = parseInt($(this).css("top"));
				console.log("old ptableNumber:" + ptableNum + " old pNumber:" + pNum);
				console.log("click p" + " ptableNumber:" + ptableNumber + " pNumber:" + pNumber);
				console.log("pLeftOldNumber:" + pLeftOldNumber + " pTopOldNumber:" + pTopOldNumber);
				if(ptableNumber != ptableNum || pNumber != pNum)
				{
					removePHelper(ptableNum,pNum);
					
					ptableNum = ptableNumber;
					pNum = pNumber;
					
					addPControllerFace(ptableNumber,pNumber);
					setPControllerFace(ptableNumber,pNumber);
					//pFontSize(ptableNumber,pNumber);
					pFontSizeSpinner(ptableNumber,pNumber);
					//pLineHeight(ptableNumber,pNumber);
					pLineHeightSpinner(ptableNumber,pNumber);
					pColor(ptableNumber,pNumber);
					pColorMore(ptableNumber,pNumber);
					pAlign(ptableNumber,pNumber);
					pResetPosition(ptableNumber,pNumber);
					pTextarea(ptableNumber,pNumber);
				}
				else
				{
					pLeftOldNum = pLeftOldNumber;
					pTopOldNum = pTopOldNumber;
				}
			},
			drag: function() {
				console.log("drag");
			},
			stop: function() {
				console.log("stop");
				var pLeftNewNumber = parseInt($(this).css("left"));
				var pTopNewNumber = parseInt($(this).css("top"));
				console.log("pLeftNewNumber:" + pLeftNewNumber + " pTopNewNumber:" + pTopNewNumber);
				var pLeft = Math.abs(pLeftNewNumber - pLeftOldNum);
				var pTop = Math.abs(pTopNewNumber - pTopOldNum);
				if(pLeft + pTop <= 10)
				{
					$(this).css({
						"left":pLeftOldNum+"px",
						"top":pTopOldNum+"px"
					});
				}
			}
		});
	}
	
	//移除<h3>,<p>
	var removeH3P = function(){
		$(".helper .remove-h3-p").each(function(index, element){
			$(this).on("click",function(){
				console.log("index:"+index);
				console.log("remove <h3> <p>");
				$("table").eq(index).find("td").eq(1).children().remove();
			});
		});
	}
	
	//移除table
	var removeTable = function(){
		$(".helper .remove-table").each(function(index, element){
			console.log("11111");
			console.log($(this));
			$(this).on("click",function(){
				console.log("22222");
				console.log($(this));
				console.log("index:"+index);
				console.log("remove table");
				$(this).parent().parent('.helper').prev('table').remove();
				$(this).parent().parent('.helper').remove();
				//$(".helper").eq(index).remove();
				//$("table").eq(index).remove();
				addNumber--;
				console.log('addNumber:'+addNumber);
				if(addNumber == 0)
				{
					$("#" + productNameSubmit + "-main").remove();
				}
			});
		});
	}
	
	//注册控制器监听事件
	var addControllerEvent = function()
	{
		$('.helper div').children().unbind();
		changeTableHeight();
		setTdAlign();
		addH3();
		addP();
		removeH3P();
		removeTable();
	}
	
	//添加控制器
	var addController = function(){
		addControllerFace();
		addControllerEvent();
	}
	
	$(function(){
		//“选项确认”点击
		$("#set-option .option-submit").on("click",function(){
			//获取输入的数据
			var productName = $("#set-option .product-name").val();
			var optionVal = $("#set-option .td-auto option:selected").val();
			var middleWidth = parseInt($("#set-option .main-width").val());
			var sideWidth = parseInt($("#set-option .no-auto-width").val());
			var tableWidth = parseInt($("#set-option .total-width").val());
			
			init();
			var judge = validateData(productName,optionVal,middleWidth,sideWidth,tableWidth);
			if(judge)
			{
				if(optionVal == "yes")
				{
					submitValue(productName,1,middleWidth,0,tableWidth);
					modifyMFTable();
				}
				else
				{
					submitValue(productName,0,middleWidth,sideWidth,0);
					modifyTLTable();
				}
			}
		});
		
		//"选择td是否使用auto"改变
		$("#set-option .td-auto").change(function(){
			var optionVal = $(this).children('option:selected').val(); 
			if(optionVal == "选择td是否使用auto")
			{
				console.log("选择td是否使用auto");
			}
			else if(optionVal == "yes")
			{
				console.log("yes");
				$("#set-option .no-auto-width").val("").attr("disabled",true);
				$("#set-option .total-width").val("").attr("disabled",false);
			}
			else
			{
				console.log("no");
				$("#set-option .total-width").val("").attr("disabled",true);
				$("#set-option .no-auto-width").val("").attr("disabled",false);
			}
		});
		
		//“add”点击
		$("#append-new .add").on("click",function(){
			if(alreadyCommit == 0)
			{
				alert("选项确认");	
			}
			else
			{
				//添加table内容
				addContent();
				//插入可视化控制器
				addController();
			}
		});
		
		//“end”点击
		$("#commit .end").on("click",function(){
			$("h3").each(function(index, element) {
				var fz = $(this).css("font-size");
				$(this).css("margin",fz + " 0 " + fz + " 0 ");
            });
			
			$("p").each(function(index, element) {
				var fz = $(this).css("font-size");
				$(this).css("margin",fz + " 0 " + fz + " 0 ");
            });
			$(".h3draggable").unbind().removeAttr("class");
			$(".pdraggable").unbind().removeAttr("class");
			$(".colorpanel").unbind().remove();
			$("#set-option,#append-new,#commit,.helper,link,script,style").remove();
		});
	});
</script>

<body style="padding:0;margin:0;">
	<div id="set-option">
    	<input type="text" name="product-name" class="product-name" placeholder="产品型号(英文)"/>
    	<select name="select" class="td-auto">
    	  <option value="选择td是否使用auto">选择td是否使用auto</option>
    	  <option value="yes">yes</option>
    	  <option value="no">no</option>
  	  </select>
    	<input type="text" name="main-width" class="main-width" placeholder="中间td的宽度(px)不少于500"/>
        
        <input type="text" name="no-auto-width" class="no-auto-width" placeholder="不使用auto时两边td宽度(px)不少于500"/>
        
        <input type="text" name="total-width" class="total-width" placeholder="table宽度(px)不少于500"/>
        
        <button class="option-submit">选项确认</button>
    </div>
    
    <div id="append-new">
		<button class="add">add</button>
	</div>
    
<div id="commit">
  <button class="end">end</button>
</div>

</body>
</html>

